<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${applicationScope.ojName}</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.flat.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.page.css"/>
    <style>
        .main {
            width: 60%;
            margin: 0 auto;
        }

        form {
            width: 60%;
            margin: 30px auto;
        }
    </style>
</head>

<body>

<jsp:include page="/heard.html" flush="true"/>

<div class="main" id="main">
    <form class="am-form">
        <fieldset>
            <legend>注册</legend>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="username_div">
                <label for="username">学号*</label>
                <input type="text" class="am-radius am-form-field" id="username">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="nick_div">
                <label for="username">姓名</label>
                <input type="text" class="am-radius am-form-field" id="nick" title="nick">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="email_div">
                <label for="username">邮箱</label>
                <input type="email" class="am-radius am-form-field" id="email" title="email">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="password_div">
                <label for="password">密码*</label>
                <input type="password" class="am-radius am-form-field" id="password">
                <span class="am-icon-times" style="display: none;"></span>
            </div>
            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="password2_div">
                <label for="password">确认密码*</label>
                <input type="password" class="am-radius am-form-field" id="password2" title="password">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <button type="button" class="am-btn am-btn-primary submit">注册</button>
            <div class="am-btn-group">
                <a href="${pageContext.request.contextPath}/login.html" class="am-btn am-btn-secondary">返回</a>
            </div>
        </fieldset>
    </form>
</div>

<jsp:include page="/foot.html" flush="true"/>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.page.js"></script>
<script src="${pageContext.request.contextPath}/js/sha256.min.js"></script>
<script>
    $(function () {
        $('.submit').click(function () {
            clearError();
            $.AMUI.progress.start();
            var username = $('#username').val();
            var password = $('#password').val();
            var nick = $('#nick').val();
            var email = $('#email').val();
            var password2 = $('#password2').val();

            var patrn = /^([a-zA-Z0-9]){1,16}$/;
            if (!patrn.exec(username)) {
                setUsernameError();
                $.AMUI.progress.done();
                return false;
            }
            patrn = /^(\w){6,16}$/;
            if (patrn.exec(password)) {
            } else {
                setPassword1Error();
                $.AMUI.progress.done();
                return false;
            }
            if (password !== password2) {
                setPasswordError();
                $.AMUI.progress.done();
                return false;
            }
            password = sha256(password);
            console.log(password);
            $.post('${pageContext.request.contextPath}/api/register.html', {
                username: username,
                password: password,
                nick: nick,
                email: email
            }, function (data) {
                if (data === 'true') {
                    alert('注册成功');
                    window.location.href = '${pageContext.request.contextPath}/login.html';
                } else if (data === 'username') {
                    alert('用户名已被注册');
                    setUsernameError();
                }
                $.AMUI.progress.done();
            });
        });
    });

    function setUsernameError() {
        $('#username_div').addClass('am-form-error')
            .find('span').show();
    }

    function setPassword1Error() {
        $('#password_div').addClass('am-form-error')
            .find('span').show();
    }

    function setPasswordError() {
        $('#password2_div').addClass('am-form-error')
            .find('span').show();
    }

    function clearError() {
        $('#password_div').removeClass('am-form-error')
            .find('span').hide();
        $('#password2_div').removeClass('am-form-error')
            .find('span').hide();
        $('#username_div').removeClass('am-form-error')
            .find('span').hide();
    }
</script>
</body>

</html>